<template>
  <div class="dashboard-container">

    <el-form ref="form" :inline="true" size="small" label-width="66px">
      <el-form-item style="margin-bottom: 20px;margin-top: 20px"
                    label-width="100px" clearable label="选择公司">
        <el-select
          v-model="companyId"
          placeholder="全部"
          @change="changeCompany"
          style="width:92%"
        >
          <el-option
            v-for="item in companys"
            :key="item.name"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div class="dashboard-editor-container">
      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
        <line-chart :chart-data="this.lineChartData"/>
      </el-row>
    </div>
  </div>
</template>

<script>

import LineChart from '@/views/dashboard/LineChart2'
import crudCompany from '@/api/system/company'
import crudStatictis from '@/api/system/statictis'

export default {
  name: 'Statistics',
  components: {
    LineChart
  },
  mounted() {
    this.getAllCompanys()
    this.getRecruit({})
  },
  data() {
    return {
      lineChartData: {
        newData: [0, 0, 0, 0, 0, 0, 0],
        distributionData: [0, 0, 0, 0, 0, 0, 0],
        titleData: ['', '', '', '', '', '', '']
      },
      companys: [],
      companyId: null
    }
  },
  methods: {
    // 获取所有公司信息
    getAllCompanys() {
      crudCompany.getAllCompany().then(res => {
        this.companys = res.content
      }).catch(() => {
      })
    },
    getRecruit(data) {
      crudStatictis.getRecruit(data).then(res => {
        this.lineChartData = res
      }).catch(() => {
      })
    },
    // 修改公司
    changeCompany(id) {
      this.getRecruit({ companyId: id })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
